<template>
  <div class='upload-wrap' v-bind="$attrs">
    <template v-if="fileList">
      <transition-group name="image-list-transition" tag="div" class="image-list">
        <el-image v-for="(item,index) in fileList" :key="item + index" class="image" :src="item" @dblclick="handleRemove(item)" fit="cover">
        </el-image>
      </transition-group>
    </template>
    <el-upload class="upload" :action="uploadFileUrl" :headers="headers" :show-file-list="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
import { get } from '@/utils/auth'
export default {
  props: {
    value: {
      required: true,
    },
  },
  data () {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + get('admin_token'),
      },
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      IsShowload: true
    };
  },
  computed: {
    modelValue: {
      get () {
        if (this.value) {
          this.fileList = this.value
        }
        return this.value
      },
    }
  },
  watch: {
    fileList: {
      handler(val) {
        console.log(val)
        this.$emit('change', val)
      }
    },
  },
  methods: {
    handleRemove (file) {
      this.fileList.splice(this.fileList.indexOf(file), 1)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess (response, file, fileList) {
      this.fileList.push(response.data.url)
    },
  }
}
</script>

<style lang='less' scoped>
.upload-wrap {
  display: flex;
  .image-list {
    transition: all 0.2s ease;
  }
  .image {
    transition: all 0.2s ease;
    width: 80px !important;
    height: 80px !important;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>